<template>
  <div id="app">
      <transition :name="viewAnimate" keep-alive>
        <router-view  :key="key"></router-view>
      </transition>
      <BottomTab v-if="ifBottom" :route="route"></BottomTab>
  </div>
</template>
<script>
import '../node_modules/amfe-flexible/index'
import 'normalize.css'
import {mapState} from 'vuex'
import BottomTab from '@/components/commonComponents/BottomTab'
import Header from '@/components/commonComponents/Header'
export default {
  directives: {
  },
  computed: {
    ...mapState({
      isNetworkOnline: function(){return true}
    }),
    key(){
      return this.$route.path + Math.random();
    }
  },
    // dynamically set transition based on route change
  watch: {
    $route(to, from) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.viewAnimate = 'slide-left'
      if((/^\/index|\/mycenter|\/infos|\/message$/).test(to.path) || to.path=='/'){
        this.ifBottom = true;
      }else{
        this.ifBottom = false;
      }
      this.route = to.path
    }
  },
  beforeCreate () {
    let user = localStorage.getItem('user');
    if (user) {
      this.$store.commit('SETUSER', JSON.parse(user));
    }
  },
  mounted(){
    if(!this.app.isInAPP){
     $('#app').addClass('notInapp');
    }else{
      if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){//APP里的ios高度调整下
        $('#app').addClass('isIniosApp');
      }
    }
  },
  data () {
    return {
      viewAnimate: 'slide-left',
      title: '首页',
      ifBottom: true,
      ifHeader: false,
      route:''
    }
  },
  components: {
    BottomTab
  }
}
</script>

<style>
html{
  height:100%;
}
body{
  min-height:100%;
  color: #333;
  background: #F5F5F5;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}
#app input{
  border: 0!important;
  background: transparent!important;
  margin-bottom:0;
}
.notInapp .search_bar{padding-top: .24rem!important;}
.notInapp .nav_outer{padding-top: 1.4rem!important;}
.notInapp .yui-bar{padding-top:0!important;}
.notInapp .yui-bar-back{top:0!important;}
.notInapp .yui-bar-btn{top:0!important;}
.notInapp .switch{top:0.35rem!important;}

.isIniosApp .search_bar{padding-top: 1.28rem!important;}
.isIniosApp .nav_outer{padding-top: 2.16rem!important;}
.isIniosApp .yui-bar{padding-top:0.72rem!important;}
.isIniosApp .yui-bar-back{top:0.72rem!important;}
.isIniosApp .yui-bar-btn{top:0.72!important;}
.isIniosApp .switch{top:0.96rem!important;}

.artcontent img{max-width:100%;display: block;}
.artcontent{word-break: break-all;word-wrap: break-word;}
.tcenter{
  text-align: center;
}
.tright{
  text-align: right;
}
.tleft{
  text-align: left;
}
.nav_outer{
  padding-top:1.8rem;
}
.common_statu{
  background: linear-gradient(to right, #FFAF1C 0%,#FF9337 100%);
  width: 1.44rem;
  text-align: center;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.8em;
  vertical-align: middle;
}
.flex_bet {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex_center {
    display: flex;
    align-items: center;
}
.flex_auto{
  display: flex;
  align-items: center;
}
.flex_center_colum{
    display: flex;
    flex-direction: column;
}
.flex1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.selsects {
    color: #F66926;
}

.flex2 {
    display: flex;
    flex-wrap: wrap;
}

.flex3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex4 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
input[type='text']{
  border:0;
  margin-bottom: 0;
  color: #666;
  background: transparent;
}
.yui-bar{
  padding-top: 0.6rem;
  box-sizing: content-box;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  font-size: 1.1em;
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100%;
  background: #fff;
}
.yui-bar-back{
  display: block;
  position: absolute;
  width: 1.3rem;
  height: 1.2rem;
  left: 0;
  top: 0.6rem;
  background: url(./assets/img/back@2x.png) no-repeat;
  background-position: center center;
  background-size: 0.45rem 0.45rem;
}
.yui-bar-btn{
  display: block;
  position: absolute;
  width: 1.6rem;
  text-align: center;
  height: 1.2rem;
  top: 0.6rem;
  right: 0;
  color: #4D80F1;
}
.mjbtn{
  background: #5278FB;
  color: #fff;
  text-align: center;
}
.useragree{text-decoration: none;color:#D0DAF2}
.useragree:visited{color:#D0DAF2;}
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
    .palceholder{
        height: 2.2rem!important;
    }
    .bot_tabs {
        padding-bottom: 0.6rem;
    }
}
.palceholder{
    height: 1.6rem;
}
@media screen and (max-width: 321px) {
  body{font-size: 14px!important;}
}
@media screen and (min-width: 321px) and (max-width: 400px) {
  body{font-size: 15px!important;}
}
@media screen and (min-width: 400px) {
  body{font-size: 16px!important;}
}
@keyframes slideInLeft {
    from {
        /* transform: translate3d(-100%, 0, 0); */
        opacity: 0;
    }
    to {
        /* transform: translate3d(0, 0, 0); */
             opacity: 1;
    }
}
@keyframes slideInRight {
    from {
        /* transform: translate3d(-100%, 0, 0); */
        opacity: 0;
    }
    to {
        /* transform: translate3d(0, 0, 0); */
             opacity: 1;
    }
}
@keyframes slideLeftOut {
    from {
        /* transform: translate3d(0, 0, 0); */
        opacity: 1;
    }
    to {
        /* transform: translate3d(-100%, 0, 0); */
        opacity: 0;
    }
}
@keyframes slideRightOut {
    from {
        /* transform: translate3d(0, 0, 0); */
        opacity: 1;
    }
    to {
        /* transform: translate3d(-100%, 0, 0); */
        opacity: 0;
    }
} 
.slide-left-enter-active {
    animation: slideInLeft .3s forwards;
    /* z-index:5; */
}

.slide-left-leave-active {
    /* animation: slideLeftOut .5s forwards; */
    opacity: 0;
    /* z-index:3; */
}
 .slide-right-enter-active {
    animation: slideInRight .3s forwards;
    /* z-index:5; */
}

.slide-right-leave-active {
    /* animation: slideRightOut .5s forwards; */
    opacity: 0;
    /* z-index:3; */
} 
</style>
